<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>用户名：</span>
          <el-input v-model="name"
            placeholder="请输入"
            clearable
            @clear="filterChange" />
        </div>
        <div>
          <span>账户类型：</span>
          <el-select v-model="accountValue"
            placeholder="请选择">
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <div>
          <span>变动类型：</span>
          <el-select v-model="changeValue"
            placeholder="请选择">
            <el-option v-for="item in changes"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>
      <el-table :data="tabelDtata">
        <el-table-column label="用户名">
          <template slot-scope="{row}">
            {{row.name}}
          </template>
        </el-table-column>

        <el-table-column label="账户类型"
          align="center">
          <template slot-scope="{row}">
            {{account(row.account)}}
          </template>
        </el-table-column>

        <el-table-column label="变动类型"
          align="center">
          <template slot-scope="{row}">
            {{change(row.change)}}
          </template>
        </el-table-column>

        <el-table-column label="变动金额"
          align="center">
          <template slot-scope="{row}">
            {{row.money}}
          </template>
        </el-table-column>

        <el-table-column label="创建时间"
          align="center">
          <template slot-scope="{row}">
            {{row.time}}
          </template>
        </el-table-column>

        <el-table-column label="备注"
          align="center">
          <template slot-scope="{row}">
            {{row.remarks}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      accountValue:'',
      changeValue:'',
      options: [
        { label: '全部', value: 0 },
        { label: '不是会员', value: 1 },
        { label: '普通会员', value: 2 },
        { label: '超级会员', value: 3 }
      ],
      changes: [
        { label: '全部', value: 0 },
        { label: '无变动', value: 1 },
        { label: '成为普通会员', value: 2 },
        { label: '成为超级会员', value: 3 }
      ],
      tabelDtata: [
        {
          id: 1,
          name: '王野',
          account: 3,
          change: 1,
          money: 0.0,
          time: '2019-03-22',
          remarks: '这个人很厉害'
        },
        {
          id: 2,
          name: '林夏',
          account: 2,
          change: 2,
          money: 500.0,
          time: '2019-03-22',
          remarks: '这个人有点厉害'
        },
        {
          id: 3,
          name: '簌夜',
          account: 1,
          change: 1,
          money: 0.0,
          time: '2019-03-22',
          remarks: '这个人不厉害'
        }
      ]
    }
  },
  methods: {
    filterChange(){},
    account(val) {
      if (val === 1) {
        return '不是会员'
      } else if (val === 2) {
        return '普通会员'
      } else {
        return '超级会员'
      }
    },
    change(val) {
      if (val === 1) {
        return '没有变化'
      } else if (val === 2) {
        return '成为普通会员'
      } else {
        return '成为超级会员'
      }
    }
  }
}
</script>
<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>



